<template>
    <div>
        <el-input v-model="tableDataName" placeholder="请输入姓名" style="width:240px" clearable></el-input>
        <el-input v-model="tableDataDate" placeholder="请输入日期" style="width:240px" clearable></el-input>
        <el-button type="primary" @click="doFilter">搜索</el-button>
        <el-button type="primary" @click="openData">展示数据</el-button>
        <el-table :data="tableDataEnd" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //  表格要展示的数据
            tableDataBegin: [
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-03",
                    name: "王二虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-04",
                    name: "王二虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                },
                {
                    date: "2016-05-05",
                    name: "王三虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-06",
                    name: "王三虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-07",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-08",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-03",
                    name: "王二虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-04",
                    name: "王二虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                },
                {
                    date: "2016-05-05",
                    name: "王三虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-06",
                    name: "王三虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-07",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-08",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-03",
                    name: "王二虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-04",
                    name: "王二虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                },
                {
                    date: "2016-05-05",
                    name: "王三虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-06",
                    name: "王三虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-07",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-08",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-03",
                    name: "王二虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-04",
                    name: "王二虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                },
                {
                    date: "2016-05-05",
                    name: "王三虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-06",
                    name: "王三虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-07",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-08",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-03",
                    name: "王二虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-04",
                    name: "王二虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                },
                {
                    date: "2016-05-05",
                    name: "王三虎",
                    address: "上海市普陀区金沙江路 1518 弄"
                },
                {
                    date: "2016-05-06",
                    name: "王三虎",
                    address: "上海市普陀区金沙江路 1517 弄"
                },
                {
                    date: "2016-05-07",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1519 弄"
                },
                {
                    date: "2016-05-08",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1516 弄"
                }
            ],

            // 搜索输入框的字段
            tableDataName: "",
            tableDataDate: ``,
            // 每页要展示的数据
            tableDataEnd: [],

            // 默认展示第几页
            currentPage: 1,

            // 页面展示的数据量（多少条）
            pageSize: 10,

            // 数据分页后总共多少页
            totalItems: 0,
            total: 0,
            filterTableDataEnd: [],
            flag: false
        };
    },
    created() {
        console.log(this.tableDataBegin.length);
        //  判断列表数据总行数
        this.totalItems = this.tableDataBegin.length;
        this.total = this.totalItems;
        //  判断总行数是否大于分页器每页展示的条数
        if (this.totalItems > this.pageSize) {
            for (let index = 0; index < this.pageSize; index++) {
                this.tableDataEnd.push(this.tableDataBegin[index]);
            }
        } else {
            this.tableDataEnd = this.tableDataBegin;
        }
    },
    watch: {
        tableDataEnd: function(newVal, oldVal) {
            console.log(`newVal`, newVal);
            // this.total = newVal.length / this.pageSize;
        }
    },
    methods: {
        //前端搜索功能需要区分是否检索,因为对应的字段的索引不同
        //用两个变量接收currentChangePage函数的参数
        doFilter() {
            if (this.tableDataName === "" && this.tableDataDate === "") {
                this.$message.warning("查询条件不能为空！");
                
                //页面数据改变重新统计数据数量和当前页
                this.currentPage = 1;
                // this.totalItems = this.filterTableDataEnd.length;
                //渲染表格,根据值
                this.currentChangePage(this.tableDataBegin);
                //页面初始化数据需要判断是否检索过
                this.flag = false;
                return false;
            } else {
                this.tableDataEnd = [];
                //每次手动将数据置空,因为会出现多次点击搜索情况
                this.filterTableDataEnd = [];
                if (this.tableDataName === "") {
                } else {
                    this.tableDataBegin.forEach((value, index) => {
                        if (value.name) {
                            if (value.name.indexOf(this.tableDataName) >= 0) {
                                this.filterTableDataEnd.push(value);
                            }
                        }
                    });
                }
                if (this.tableDataDate === "") {
                } else {
                    this.tableDataBegin.forEach((value, index) => {
                        if (value.date) {
                            if (value.date.indexOf(this.tableDataDate) >= 0) {
                                this.filterTableDataEnd.push(value);
                            }
                        }
                    });
                }

                //页面数据改变重新统计数据数量和当前页
                this.currentPage = 1;
                // this.totalItems = this.filterTableDataEnd.length;
                //渲染表格,根据值
                this.currentChangePage(this.filterTableDataEnd);
                //页面初始化数据需要判断是否检索过
                this.flag = true;
            }
        },
        openData() {},
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.handleCurrentChange(this.currentPage);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            //需要判断是否检索
            if (!this.flag) {
                this.currentChangePage(this.tableDataBegin);
            } else {
                this.currentChangePage(this.filterTableDataEnd);
            }
        }, //组件自带监控当前页码
        currentChangePage(list) {
            this.total = list.length;
            // 从第几个数据开始
            let from = (this.currentPage - 1) * this.pageSize;
            // 从第几个数据结束
            let to = this.currentPage * this.pageSize;
            // 清空表格数据
            this.tableDataEnd = [];

            for (from; from < to; from++) {
                if (list[from]) {
                    console.log();
                    this.tableDataEnd.push(list[from]);
                }
            }
        }
    }
};
</script>